<template>
	<view class="empty u-flex-col u-flex-center" :style="{height:computedValue.emptyHeight()}">
		<image src="https://oss.cdhxgb.com/public/web/images/message-empty.png" mode="aspectFill" class="image"></image>
		<text class="text">{{text}}</text>
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue'
	const props = defineProps({
		text: {
			type: String,
			default: "内容为空"
		},
		height: {
			type: Number,
			default: 0
		}
	})
	const computedValue = computed(() => {
		return {
			emptyHeight() {
				if (props.height) {
					return `${props.height}px`
				} else {
					return `100vh`
				}
			}
		}
	})
</script>

<style lang="scss" scoped>
	.empty {

		.image {
			width: 412rpx;
			height: 264rpx;
			display: block;
		}

		.text {
			padding-top: 20rpx;
			color: rgb(192, 196, 204);
			font-size: $font-size-28;
		}
	}
</style>